<template>
  <div>
    <el-row>
      <!-- <el-form-item label="工作人员姓名:">
        <el-input placeholder="工作人员姓名"></el-input>
      </el-form-item> -->
      <el-button type="primary" style="" @click="dialogFormVisible = true"
        >新增账号</el-button
      >
      <!-- <el-button type="primary">查询</el-button> -->
      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
          v-if="Data != null"
        >
          <el-table-column
            prop="userId"
            label="ID"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="personnel"
            label="工作人员姓名"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="password"
            label="密码"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="createtime"
            label="创建时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column> -->
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                v-if="scope.row.power == 0"
                link
                type="primary"
                size="small"
                style="color: green"
                @click="delBerbak(scope.row)"
                >已启用</el-button
              >
              <el-button
                v-else
                link
                type="primary"
                size="small"
                style="color: red"
                @click="delBerbak(scope.row)"
                >已停用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>

      <el-dialog
        title="新增工作人员"
        v-model="dialogFormVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form-item label="账号:" label-width="100px" label-position="left">
          <el-input v-model="account"></el-input>
        </el-form-item>
        <el-form-item label="密码:" label-width="100px" label-position="left">
          <el-input v-model="password"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" label-width="100px" label-position="left">
          <el-input v-model="personnel"></el-input>
        </el-form-item>
        <el-form-item label="是否为超级管理员:" label-width="100px">
          <el-select
            v-model="admin"
            placeholder=""
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <div
          slot="footer"
          class="dialog-footer"
          style="margin-top: 10px; margin-left: 60%"
        >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import apiService from "@/services/apiService";
import { v4 as uuidv4 } from "uuid";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { addUser, getAllUsers, update } from "@/api/api";
import { useNav } from "@/layout/hooks/useNav";
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Liuyan"
});
const { logout } = useNav();

//表格数据
const Data = ref<any>([]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数
const reply = ref<number>(1); //当前显示

const account = ref<any>("");
const password = ref<any>("");
const personnel = ref<any>("");
const admin = ref<any>("");
const options = [
  {
    value: "false",
    label: "否"
  },
  {
    value: "true",
    label: "是"
  }
];

const GetList = () => {
  getAllUsers().then((res: any) => {
    console.log(res);
    if (res.code == 200) {
      Data.value = res.items;
    } else if (res.code == 401) {
      ElMessage({
        type: "error",
        message: "需要重新登录"
      });
      logout();
    }
  });
};

// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

//编辑回复
const dialogFormVisible = ref(false);
//回复按钮
const submit = () => {
  if (
    account.value != "" ||
    password.value != "" ||
    personnel.value != "" ||
    admin.value != ""
  ) {
    ElMessageBox.confirm("确定添加该工作人员吗?（请妥善保存密码）", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        const data = {
          account: account.value,
          password: password.value,
          personnel: personnel.value,
          admin: admin.value
        };
        addUser(data).then((res: any) => {
          console.log(res);
          if (res.code == 200) {
            ElMessage({
              type: "success",
              message: "新增成功"
            });
            GetList();
            dialogFormVisible.value = false;
            account.value = "";
            password.value = "";
            personnel.value = "";
            admin.value = "";
          } else if (res.code == 401) {
            ElMessage({
              type: "error",
              message: "需要重新登录"
            });
            logout();
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消新增"
        });
        dialogFormVisible.value = false;
      });
  } else {
    ElMessage({
      type: "error",
      message: "请填写完整信息"
    });
  }
};

// 停用/启用账号
const delBerbak = (row: any) => {
  console.log("row", row);
  let power = row.power;
  if (power == 0) {
    ElMessageBox.confirm("确定暂停账号吗", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        const data = {
          id: row.userId,
          power: 1
        };
        update(data).then((res: any) => {
          if (res.code == 200) {
            console.log("修改账号状态", res);
            ElMessage({
              type: "success",
              message: "暂停账号成功"
            });
            GetList();
          } else if (res.code == 401) {
            ElMessage({
              type: "error",
              message: "需要重新登录"
            });
            logout();
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消新增"
        });
      });
  } else {
    ElMessageBox.confirm("确定启用账号吗", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        const data = {
          id: row.userId,
          power: 0
        };
        update(data).then((res: any) => {
          if (res.code == 200) {
            console.log("修改账号状态", res);
            ElMessage({
              type: "success",
              message: "启用账号成功"
            });
            GetList();
          } else if (res.code == 401) {
            ElMessage({
              type: "error",
              message: "需要重新登录"
            });
            logout();
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消"
        });
      });
  }
};
//关闭弹窗
const handleClose = (done: () => void) => {
  done();
};

onMounted(() => {
  GetList();
});
</script>

<style lang="scss" scoped>
.active-button {
  background-color: #409eff;
  /* 设置按钮激活时的背景颜色 */
  color: white;
  /* 设置按钮激活时的文字颜色 */
}
</style>
